<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">

    <pre>
        <h3>
            BootStrap中的基础进度条分为两部分:
            class="progress"： 用于外层容器。
            class="progress-bar": 用于显示进度条样式
            彩色进度条样式：
            progress-bar:默认主题色,深蓝色
            progress-bar-success:绿色
            progress-bar-info:蓝色
            Progress-bar-warin:黄色
            progress-bar-danger:红色
        </h3>
    </pre>

    <div class="progress">
        <div class="progress-bar" style="width: 20%;">
            20%
        </div>
    </div>

    <h4>显示进度条</h4>
    <div class="progress">
        <div class="progress-bar" style="width: 20%;">
            <span >已完成20%</span>
        </div>
    </div>
    <h4>进度条比例为0%时，最小长度为2px</h4>
    <div class="progress">
        <div class="progress-bar" style="width: 0%;min-width: 2px;"></div>
    </div>
    <h4>彩色进度条(基于progress-bar)</h4>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width: 20%"></div>
    </div>
    <h4>条纹进度条(在progress容器中添加progress-striped)</h4>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-success" style="width: 20%"></div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-info" style="width: 20%"></div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
    </div>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-danger" style="width: 20%"></div>
    </div>

    <h4>堆叠效果</h4>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-success" style="width: 20%;"></div>
        <div class="progress-bar progress-bar-info" style="width: 20%;"></div>
        <div class="progress-bar progress-bar-danger" style="width: 20%;"></div>
    </div>




</div>
</body>
</html>